<div class="admin-biaogelist">


    <div class="fbneirong" style="min-height: 790px" id="changesale">

        <div class="hang">
            <el-button type="primary" @click="dialogtable=true">发布任务</el-button>
        </div>
        <el-tabs v-model="activeName" >
            <el-tab-pane label="功能介绍" name="first">
                <img width="80%" src="<?php echo base_url(); ?>/public/assets/image/_20210507143443.png">
                <img width="80%" height="500px" src="<?php echo base_url(); ?>/public/assets/image/_20210507143449.jpg">
                <img src="<?php echo base_url(); ?>/public/assets/image/_20210507143452.jpg"></el-tab-pane>
            <el-tab-pane label="任务列表" name="second">




                <el-table
                        v-loading="listLoading"
                        :data="list"
                        element-loading-text="Loading"
                        border
                        fit
                        highlight-current-row
                >
                    <el-table-column align="center" width="80" label="ID">
                        <template slot-scope="scope">
                            {{ scope.row.id }}
                        </template>
                    </el-table-column>



                    <el-table-column label="添加时间" align="center" width="120px" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            {{ scope.row.addtime }}
                        </template>
                    </el-table-column>


                    <el-table-column label="状态" width="80px"
                                     align="center">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.status | statusFilter">{{select.status[scope.row.status]}}</el-tag>
                        </template>
                    </el-table-column>


                    <el-table-column label="链接" align="center"  :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            {{ scope.row.link }}
                        </template>
                    </el-table-column>


                    <el-table-column label="本金" align="center" width="80px">
                        <template slot-scope="scope">
                            {{ scope.row.money }}
                        </template>
                    </el-table-column>

                    <el-table-column label="金币" align="center" width="80px">
                        <template slot-scope="scope">
                            {{ scope.row.gold }}
                        </template>
                    </el-table-column>





                </el-table>
                <div class="hang">
                    <el-pagination
                            background
                            @size-change=""
                            @current-change="current_change"
                            layout="total,prev, pager, next"
                            :page-size="this.limit"
                            :total="total">
                    </el-pagination>
                </div>

            </el-tab-pane>
        </el-tabs>


        <el-dialog title="发布任务" :visible.sync="dialogtable" width="560px" top="15vh" :modal-append-to-body="false">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="商品链接">
                    <el-input v-model="form.link"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">创建任务</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>


        <el-dialog title="客服二维码" :visible.sync="dialogtablefenxi" width="560px" top="15vh"
                   :modal-append-to-body="false">
            <img width="100%" src="<?php echo $this->session->webinfo['weixin']; ?>">
        </el-dialog>
    </div>


    <script>



        new Vue({
            el: '#changesale',
            filters: {
                statusFilter(status) {
                    const statusMap = {
                        0: 'gray',
                        1: 'success',
                        2: 'success',
                        3: 'info',
                        4: 'danger',
                    };
                    return statusMap[status]
                }
            },
            data() {
                return {
                    dialogtable: false,
                    dialogtablefenxi: false,
                    tabletitelfenxi: "",
                    listLoading: false,
                    activeName: "first",
                    select: {
                        status: ["未发布", "已发布", "已发布(1)", "已完成(2)", "已废除"]
                    },
                    form: {
                        link: "",
                        user_id: "",
                        phone: "",
                        name: "",
                        username: "",
                        createDate: [],
                    },
                    type: "line",

                    currpage: 1,
                    pagesize: 10,
                    tabletitel: "",
                    list:[],
                    total:0,
                }
            },
            created() {
                this.getlist(1);
            },

            methods: {

                onSubmit() {
                    var postdata = {
                        'link': this.form.link,
                    };

                    let that = this;
                    var url = "<?php echo base_url(); ?>Business/setsales";
                    $.ajax({
                        url: url,
                        type: "POST",
                        dataType: "json",
                        data: postdata,
                        success: function (res) {
                            if (res.code != 0) {
                                that.$message({
                                    message: "提交成功，轻联系客服进行操作",
                                    type: 'warning',
                                    offset: 300,
                                    duration: 1500
                                });
                                that.dialogtable = false;
                                that.dialogtablefenxi = true;


                            } else {
                                that.$message({
                                    message: "修改成功",
                                    type: 'success',
                                    offset: 300,
                                    duration: 1500
                                });
                                that.getdata(1);
                            }
                        }
                    })
                },
                getlist(page = "") {

                    var url =  "<?php echo base_url(); ?>Business/getTableList/changesals";
                    var postdata = {};
                    $.each(this.form, function (i, v) {
                        postdata[i] = v;
                    });
                    if (page) {
                        this.currpage = page
                        postdata.currpage = this.currpage;
                    } else {
                        postdata.currpage = 1;
                        this.currpage = 1;
                    }
                    postdata.user_id = user_id;
                    postdata.epage =10;
                    if (postdata.createDate.length > 0) {
                        postdata.date1 = postdata.createDate[0];
                        postdata.date2 = postdata.createDate[1];
                        delete postdata.createDate;
                    }
                    var that = this;


                    $.ajax({
                        url: url,
                        type: "POST",
                        dataType: "json",
                        data: postdata,
                        success: function (data) {
                            if (data.code == 0) {
                                that.list = data.list;
                                that.total = data.count
                            } else {
                                that.listLoading = false;
                                that.$message({
                                    message: data.msg,
                                    type: 'warning',
                                    offset: 300,
                                    duration: 1500
                                });
                            }
                        }
                    })



                },
                current_change(currentPage) {
                    this.currpage = currentPage;
                    this.getlist(currentPage);
                },

            }
        })
    </script>

    <style>

        .admin-biaogelist {
            width: 85%;
            left: 15%;
        }

        .el-form {
            height: auto;
            overflow: hidden;
            padding: 10px;
        }

        .uploadPicButton {
            display: inline-block !important;
            float: right;
            width: 200px !important;
        }

        .el-upload__input {
            display: none !important;
        }

        .body_head_box {
            margin-top: 10px;
        }

        .body_head {
            width: 100%;
            height: 70px;
            background-color: white;
            font-size: 14px;
            font-weight: bold;
        }

        .upload-demo {
            display: inline-block;
            width: auto;
            float: right;

        }

        .hang {
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: 8px 0px;
        }
    </style>
